import React, { Component } from 'react'

export default class City extends Component {
    constructor () {
        super();
        this.state = {
            provid: 0,
            citiesid: '',
            regionid: '',
            citiesList: [],
            regionList: [],
            list1: [
                { id: 1, name: "湖北", pid: 0 },
                { id: 2, name: "湖南", pid: 0 },
                { id: 3, name: "武汉", pid: 1 },
                { id: 4, name: "荆州", pid: 1 },
                { id: 5, name: "江夏", pid: 3 },
                { id: 6, name: "洪山", pid: 3 },
                { id: 7, name: "沙市", pid: 4 },
                { id: 8, name: "松滋", pid: 4 },
                { id: 9, name: "长沙", pid: 2 },
                { id: 10, name: "岳阳", pid: 2 },
                { id: 11, name: "岳麓山", pid: 9 },
                { id: 12, name: "雨花", pid: 9 },
                { id: 13, name: "岳阳楼", pid: 10 },
                { id: 14, name: "岳阳的区二", pid: 10 },
            ],
            list2: [
                {
                    id: 1,
                    name: "湖北",
                    list: [
                        {
                            id: 11,
                            name: "武汉",
                            list: [
                                { id: 111, name: "江夏" },
                                { id: 112, name: "洪山" },
                            ],
                        },
                        {
                            id: 12,
                            name: "荆州",
                            list: [
                                { id: 121, name: "沙市" },
                                { id: 122, name: "松滋" },
                            ],
                        },
                    ],
                },
                {
                    id: 2,
                    name: "湖南",
                    list: [
                        {
                            id: 21,
                            name: "长沙",
                            list: [
                                { id: 211, name: "岳麓山" },
                                { id: 212, name: "雨花" },
                            ],
                        },
                        {
                            id: 22,
                            name: "岳阳",
                            list: [
                                { id: 221, name: "岳阳楼" },
                                { id: 222, name: "岳阳的区二" },
                            ],
                        },
                    ],
                },
            ],
        }
    }
    selectCties(pid) {
        let cities = [];
        if (pid !== '') {
            cities = this.state.list1.filter(item => {
                return item.pid === pid * 1
            }).map(item => <option value={item.id} key={item.id}>{item.name}</option>)
        }
        return cities
    }
    changePid(value, cityType) {
        this.setState({
            regionid: '',
            [cityType]: value,
        }, () => {
            this.selectCties(this.state[cityType])
        })
    }
    changeList(value, listType, data) {
        if (data.length !== 0 && value !== '') {
            this.setState({
                regionList: [],
                [listType]: this.state[data].filter(item => item.id === value * 1)[0].list
            })
        } else {
            this.setState({
                regionList: [],
                [listType]: []
            })
        }
    }

    html(data) {
        let list = [];
        if (data.length !== 0) {
            list = this.state[data].map(item => <option value={item.id} key={item.id}>{item.name}</option>)
        }
        return list
    }
    render() {

        return (
            <div>
                <div className='select'>
                    <p>数组结构</p>
                    <select className='select' onChange={(e) => { this.changePid(e.target.value, 'citiesid') }}>
                        <option value=''>选择省份</option>
                        {this.selectCties(this.state.provid)}
                    </select>
                    <select className='select' onChange={(e) => { this.changePid(e.target.value, 'regionid') }}>
                        <option value=''>选择城市</option>
                        {this.selectCties(this.state.citiesid)}
                    </select>
                    <select className='select' >
                        <option value=''>选择区域</option>
                        {this.selectCties(this.state.regionid)}
                    </select>
                </div>
                <hr />
                <div className='select'>
                    <p>树状结构</p>
                    <select className='select' onChange={(e) => { this.changeList(e.target.value, 'citiesList', 'list2') }}>
                        <option value=''>选择省份</option>
                        {this.html('list2')}
                    </select>
                    <select className='select' onChange={(e) => { this.changeList(e.target.value, "regionList", 'citiesList') }}>
                        <option value=''>选择城市</option>
                        {this.html('citiesList')}
                    </select>
                    <select className='select'>
                        <option value=''>选择区域</option>
                        {this.html('regionList')}
                    </select>
                </div>
            </div>
        )
    }
}
